<script setup lang="ts">
import type {IPage} from '@/type/interfaces'
import type { PropType } from 'vue'
interface IProps {
  page: IPage
}
const props = defineProps({
  page:{
    type: Object as PropType<IPage>,
    default:{
      // 顺序一般是全局制定
      layout : ' prev, pager, next, jumper, sizes,',
      hideOnSinglePage: false,
      pageSizes: [10, 20, 30, 40, 50, 100,200],
      total: 0,
      pageSize: 10,
      currentPage: 1,
    }
  }
})
const pageInfo = ref<IPage>({
      total: 0,
      pageSize: 10,
      currentPage: 1,
      pageSizes: [10, 20, 30, 40, 50, 100,200],
      layout : ' prev, pager, next, jumper, sizes,',
      hideOnSinglePage: false,
})
const emit = defineEmits(['change'])
const pageUpdateEvent = () =>{
  //分页更新事件
  // 整合@current-change @size-change 两个事件，父组件仅需
  // 侦听 @change事件，覆盖赋值即可
  emit('change',pageInfo.value)
}
const pageChange = (currentPage:number)=>{
  pageInfo.value.currentPage = currentPage
  pageUpdateEvent()
}
const sizeChange = (pageSize:number)=>{
  pageInfo.value.pageSize = pageSize
  pageUpdateEvent()
}
const init = ()=>{
  Object.assign(pageInfo.value,props.page)
}
init()
</script>
<template>
  <el-pagination
      v-bind="$attrs"
      v-model:current-page="pageInfo.currentPage"
      v-model:page-size="pageInfo.pageSize"
      :page-sizes="pageInfo.pageSizes"
      :layout="pageInfo.layout"
      :hide-on-single-page="pageInfo.hideOnSinglePage"
      background
      :total="pageInfo.total"
      @current-change="pageChange"
      @size-change="sizeChange"
    />
</template>